<script setup lang="ts">
import { reactive, ref } from 'vue'

const list = ref([
  { id: 1, name: '《红楼梦》', author: '曹雪芹' },
  { id: 2, name: '《西游记》', author: '吴承恩' },
  { id: 3, name: '《水浒传》', author: '施耐庵' },
  { id: 4, name: '《三国演义》', author: '罗贯中' }
])


let del = (id:number) => {
  list.value = list.value.filter(item => item.id !== id)
}

let book = reactive({
  id: 0,
  name: '',
  author: ''
})

let add = () => {
  book.id = list.value.length + 1
  list.value.push({...book})
  book = {} as any
}

let edit = (id:number) => {
  book = {...list.value.find(item => item.id === id)!}
  isEdit.value = id
}

let edit_save = () => {
  list.value[list.value.findIndex(item => item.id === book.id)] = book
  book = {} as any
  isEdit.value = 0
}

let isEdit = ref(0)

</script>


<template>
  <div class="column">
    <div class="bookshelf">
      <h3>小黑的书架</h3>
      <ul>
        <li v-for="(item, index) in list" :key="item.id" class="book-item">
          <span class="book-title">书名: {{ item.name }}</span>
          <span class="book-author">作者: {{ item.author }}</span>
          <button @click="isEdit ? null :del(item.id)" :class="isEdit ? 'delete-button enable_false'  : 'delete-button'">删除</button>
          <button @click="edit(item.id)" :class="isEdit && isEdit != item.id ? 'edit-button enable_false' : 'edit-button'">{{ isEdit === item.id ? '编辑中'  : '编辑'}}</button>
        </li>
      </ul>
    </div>
    <div class="input-group">
      <input type="text" v-model="book.name" placeholder="书名" class="input-field">
      <input type="text" v-model="book.author" placeholder="作者" class="input-field">
      <button @click="isEdit ? edit_save() : add()" class="add-button">{{ isEdit ? '保存' : '添加'}}</button>
    </div>
    <!-- <div class="debug-info">{{ book }}</div> -->
  </div>
</template>

<style scoped>
.column {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.bookshelf {
  width: 100%;
  max-width: 600px;
  margin-bottom: 20px;
}

.book-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

.book-title, .book-author {
  margin-right: 10px;
}

.delete-button {
  background-color: #ff4d4d;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 4px;
}

.enable_false {
  opacity: 0.5;
}

.edit-button {
  background-color: #1890ff;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 4px;
}

.input-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 600px;
}

.input-field {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.add-button {
  background-color: #1890ff;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 4px;
  width: 100%;
  max-width: 200px;
}

.debug-info {
  margin-top: 20px;
  padding: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 4px;
}
</style>